<template>
  <div>
    <div class="drag-box" v-for="(item,index) in formData" :key="index" :type="item">
      <MyTag :type="item" @click="handleClick"></MyTag>
      <drag-dialog :visible.sync="dialogVisible[index].show" width="30%" top="15vh" @close="handle(index)"
                   @cancel="handle(index)" @confirm="handle(index)">
        <div slot="title" :style="`color: ${dialogVisible[index].color}`">点击此处拖拽</div>
        {{ dialogVisible[index].content }}
      </drag-dialog>
    </div>
  </div>
</template>

<script>
import DragDialog from '@/components/dragDialog.vue'

console.log(DragDialog)

export default {
  name: 'showDragDialog',
  components: {
    MyTag: {
      props: {
        type: {
          default: () => 1
        }
      },
      render(h) {
        const stateMap = {
          0: {
            color: '#909399',
            content: '审核中',
            icon: ''
          },
          4: {
            color: '#F56C6C',
            content: '审核失败',
            icon: 'el-icon-error'
          },
          3: {
            color: '#E6A23C',
            content: '数据丢失',
            icon: 'el-icon-warning'
          },
          2: {
            color: '#67C23A',
            content: '审核成功',
            icon: 'el-icon-success'
          },
          1: {
            color: '#409EFF',
            content: '待审核',
            icon: 'el-icon-info'
          }
        }
        return h('div', {
          class: 'h', style: {
            '--BaseColor': stateMap[this.type]?.color
          },
          on: {
            click: () => {
              this.$listeners.click(stateMap[this.type], this.type)
            }
          }
        }, [h('i', {
          class: [stateMap[this.type]?.icon, 'icon']
        }), stateMap[this.type]?.content])
      }
    },
    DragDialog
  },
  data() {
    return {
      formData: [0, 1, 2, 3, 4],
      value: {},
      dialogVisible: [],
    }
  },
  created() {
    this.dialogVisible = new Array(this.formData.length).fill(false)
  },
  methods: {
    handleClick(value, index) {
      this.value = value
      this.dialogVisible[index] = {
        ...value,
        show: true
      }
      this.$forceUpdate()
    },
    handle(index) {
      console.log('执行了')
      this.dialogVisible[index].show = false
      this.$forceUpdate()
    }
  }
}
</script>
<style scoped>


body {
  box-sizing: border-box;
}

.h {
  display: inline-block;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--BaseColor);
  border-radius: 4px;
  font-size: 12px;
  line-height: 32px;
  white-space: nowrap;
  color: var(--BaseColor);
  cursor: pointer;
  /*background: var(--BaseColor);*/
}

>>> .icon {
  margin-right: 2px;
}

.drag-box {
  display: inline-block;
  margin-left: 50px;
}

.drag-box:first-child {
  margin-left: 0;
}


.drag-box + .drag-box {
  margin-left: 50px;
}

.drag-point {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 20px;
  background: #dee1e6;
  cursor: move;
}

.drag-point i {
  width: 21px;
  cursor: pointer;
}
</style>

